<template>
  <div class="home">
    <!-- 搜索框  van-sticky粘性布局 -->
    <van-sticky>
      <nav-bar :class="[scrollTop > 150 ? 'theme-nav-bar' : 'default-nav-bar']">
        <template #left>
          <i class="iconfont icon-saoma" />
        </template>
        <template #center>
          <div class="nav-bar-center">
            <i class="iconfont icon-iconseach"></i>
            <span>搜索</span>
          </div>
        </template>
        <template #right>
          <i class="iconfont icon-msg" />
        </template>
      </nav-bar>
    </van-sticky>

    <!-- 轮播 indicator-color轮播图切换的标志颜色 autoplay多少秒切换一次-->
    <van-swipe class="swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banners" :key="item.id">
        <img v-lazy="item.image" width="100%" />
      </van-swipe-item>
    </van-swipe>

    <!-- 热门活动【引入】 -->
    <recommend :recommends="recommends"></recommend>

    <!-- 图片 -->
    <div class="img">
      <img src="../../assets/img/feature_bg.png" alt="" />
    </div>

    <!-- 商品导航栏 -->
    <van-sticky :offset-top="44">
      <tabs :tabs="tabs" @change="(type) => (currentType = type)"></tabs>
    </van-sticky>

    <!-- 滚动加载 immediate-check页面初始化【false不加载】-->
    <van-list @load="loading" :immediate-check="false">
      <!-- 商品瀑布流 -->
      <waterfall style="display: flex">
        <waterfall-item style="width: 50%">
          <goods
            v-for="item in goods[currentType].left"
            :key="item.id"
            :item="item"
            @click.native="$router.push(`/detail/${item.iid}/${item.id}`)"
          />
        </waterfall-item>
        <waterfall-item style="width: 50%">
          <goods
            v-for="item in goods[currentType].right"
            :key="item.id"
            :item="item"
            @click.native="$router.push(`/detail/${item.iid}/${item.id}`)"
          />
        </waterfall-item>
      </waterfall>
    </van-list>

    <van-loading size="24px" style="text-align: center">加载中...</van-loading>

    <!-- 返回顶端 -->
    <back-top v-show="isHidden" @click.native="handleBackTop" />
  </div>
</template>

<script>
import { queryBanner, queryRecommend, queryGoods } from '../../api'
import BackTop from '../../components/back-top/back-top.vue'
import Goods from '../../components/goods/goods.vue'
import navBar from '../../components/nav-bar/nav-bar.vue'
import Recommend from '../../components/recommend/recommend.vue'
import Tabs from '../../components/tabs/tabs.vue'
import WaterfallItem from '../../components/waterfall/waterfall-item.vue'
import Waterfall from '../../components/waterfall/waterfall.vue'
export default {
  components: {
    navBar,
    Recommend,
    Tabs,
    Waterfall,
    WaterfallItem,
    Goods,
    BackTop
  },
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        new: { page: 1, left: [], right: [] },
        sell: { page: 1, left: [], right: [] },
        pop: { page: 1, left: [], right: [] }
      },
      tabs: [
        { title: '最新', type: 'new' },
        { title: '流行', type: 'pop' },
        { title: '精选', type: 'sell' }
      ],
      currentType: 'new',
      timer: null,
      scrollTop: 0
    }
  },
  computed: {
    // 距离顶部2倍位置显示返回顶部按钮
    isHidden() {
      return this.scrollTop > window.innerHeight * 2
    }
  },
  methods: {
    // 查询轮播图数据
    async queryBanner() {
      this.banners = await queryBanner()
    },
    // 查询热门数据
    async queryRecommend() {
      this.recommends = await queryRecommend()
    },
    // 查询商品数据
    async queryGoods(type) {
      // 根据商品类型获取页码数
      const { page } = this.goods[type]
      const data = await queryGoods({ type, page })
      data.forEach((item, index) =>
        this.goods[type][index % 2 == 0 ? 'left' : 'right'].push(item)
      )
      this.goods[type].page++
    },
    // 滚动加载数据
    loading() {
      // 节流【再指定的时间内函数只执行一次】
      if (this.timer) clearTimeout(this.timer) // 如果有时间则清空时间
      this.timer = setTimeout(() => {
        this.queryGoods(this.currentType)
        // this.isLoading = false
      }, 1000)
    },
    // 滚动事件
    scroll() {
      this.scrollTop = document.documentElement.scrollTop
    },
    // 返回顶部
    handleBackTop() {
      document.documentElement.scrollTop = 0
    }
  },
  async mounted() {
    this.queryBanner()
    this.queryRecommend()
    this.queryGoods('new')
    this.queryGoods('sell')
    this.queryGoods('pop')
    this.scroll()
  },
  // keep alive[vue周期]
  // 处于这个页面：激活组件：添加页面滚动监听
  activated() {
    window.addEventListener('scroll', this.scroll)
  },
  // 跳转另一个页面：停止组件：移除页面滚动监听
  deactivated() {
    window.removeEventListener('scroll', this.scroll)
  }
}
</script>

<style scoped lang="less">
.default-nav-bar {
  background: #ffffff;
}
.theme-nav-bar {
  background: var(--theme-color);
  transition: all 0.5s;
  .icon-saoma,
  .icon-msg {
    color: white;
  }
}
.nav-bar-center {
  background: var(--gray-shallow);
  text-align: left;
  line-height: 28px;
  border-radius: 28px;
  font-size: 12px;
  color: var(--gray-moderate);

  .icon-iconseach {
    font-size: 12px;
    margin: 0 5px 0 10px;
  }
}

.swipe {
  width: 95%;
  margin: 10px auto;
  border-radius: 5px;
  height: 180px;
}
.img {
  width: 95%;
  margin: 5px auto;
}
img {
  width: 100%;
  border-radius: 5px;
}
</style>
